<script setup lang="ts">
    const mainStore = useMainStore();
</script>

<template>
    <div v-for="block, index of mainStore.svgStack.toReversed()" :key="index" :class="{ [$style.blockOuter]: true, 'noselect': true, [$style.active]: block === mainStore.chosenBlock }" @click="() => mainStore.choseBlock(block)">
        <div :class="$style.blockInner" @click="() => mainStore.choseBlock(block)">
            <div v-if="block.length === 0"> Пусто </div>

            <template v-else>
                <template v-for="svgElement of block">
                    <ChartElement v-if="svgElement.type === 'chart'" :chartElement="svgElement" />
                </template>
            </template>
        </div>
    </div>
</template>

<style module>
.blockOuter {
    --color-background: #ffe500;

    width: 100%;
    min-height: 100px;
    background-size: 20px 20px;
    background-image: linear-gradient(
        45deg, 
        var(--color-background) 10%, 
        #c7c7c7 10%, 
        #c7c7c7 40%, 
        var(--color-background) 40%, 
        var(--color-background) 60%, 
        #c7c7c7 60%, 
        #c7c7c7 90%, 
        var(--color-background) 90%
    );
    padding: 5px;
    z-index: 1;
    margin-bottom: 10px;
    cursor: pointer;
}

.blockOuter.active {
    --color-background: #3342cf;
}

.blockOuter:last-child {
    margin-bottom: 0px;
}

.blockInner {
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: rgba(208, 208, 214, 0.25) 0px 30px 60px -12px inset, rgba(194, 194, 194, 0.3) 0px 18px 36px -18px inset;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    
    cursor: pointer;

    padding: 10px;
}
</style>